import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Modal,
    StatusBar,
    FlatList,
    Image,
    TouchableWithoutFeedback,
    ActivityIndicator
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
import Gallery from 'react-native-image-gallery';
import Loading from 'react-native-lindf-loading';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
export default class MyOrder extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            tabIndex: 1,
            hasData: true,
            // 控制下拉加载状态
            isLoading: 0,
            // 控制下拉刷新
            isLoad: false,
            showModal: false,
            page: 0,
            topImage: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
            newsList: [
                {
                    id: 1,
                    time: '2018-03-30 15:30',
                    lists: [
                        {
                            id: 2,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 5,
                            price: 100.00,
                        }
                    ]
                },
                {
                    id: 2,
                    time: '2018-03-30 15:30',
                    lists: [
                        {
                            id: 3,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 3,
                            price: 50.00,
                        },
                        {
                            id: 4,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 1,
                            price: 200.00,
                        }
                    ]
                }
            ],
            isModal: false,

        };
    }
    componentWillMount(){
        const { params } = this.props.navigation.state;
        console.log(params)
        this.setState({
            page: params.page
        })
        global.PersonalTabIndex = this;
        // fetch('https://result.eolinker.com/XPZsElz98c92f9c243e2f760bf17420ef24906430bea331?uri=lindf.com',
        //     {
        //         method: 'POST',
        //     }
        // )
        // .then((response) => response.json())        // json方式解析，如果是text就是 response.text()
        // .then((responseData) => {   // 获取到的数据处理
        //     this.setState({
        //         newsList: responseData.result.lists,
        //     },function(){
        //         this.setState({
        //             hasData: true
        //         })
        //         console.log(this.state.newsList)
        //     });

        // })
        // .catch((error) => {     // 错误处理
        //     alert(error);
        // })
        // .done();
        
        // request(
        //     'POST', 
        //     '', 
        //     (data)=>{
        //         this.setState({
        //             newsList: data.result.lists,
        //         },function(){
        //             this.setState({
        //                 hasData: true,
        //                 showModal: false
        //             })
        //         });
        //         console.log(data.result);
        //     }
        //     ,
        //     (error)=>{
        //         console.log(error);
        //     }
        // );
    }

    _onRefresh(){
        console.log('下拉刷新')
        this.setState({
            isLoad: !this.state.isLoad
        },function(){
            // 请求数据
            setTimeout(()=>{
                this.setState({
                    isLoad: !this.state.isLoad
                });
            },2000)
        });
        
    }

    _onEndReached(){
        // 如果页面刚进去触发了这函数，代表不满屏，不触发表示满屏
        console.log('触发了')
    }

    // 底部上拉加载状态
    _bottomComponent(){
        if(this.state.isLoading==0){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>点击加载更多</Text>
                </View>
            )
        }else if(this.state.isLoading==1){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>加载中...</Text>
                </View>
            )
        }else if(this.state.isLoading==2){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>暂无数据</Text>
                </View>
            )
        }
    }

    // 是否显示预览
    _isModal(){
        this.setState({
            isModal: false
        });
    }

    // 关闭等待框
    _onRequestClose() {
        this.setState({
            showModal: false
        });
    }

    _tabChoose(){
        let _this = this;
        this.setState({
            showModal: true
        },function(){
            setTimeout(()=>{
                _this.setState({
                    showModal: false
                })
            },300);
        });
    }

    render(){
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fff'
            }}>
                <Header isShowBack={true} title='我的订单' goBack={goBack} />

                <ScrollableTabView
                    // 默认选项卡栏下划线的样式
                    tabBarUnderlineStyle={{height: 2, backgroundColor: '#0000ff'}}
                    // 默认标签栏背景的颜色，默认为white
                    tabBarBackgroundColor={'white'}
                    // 选中时默认标签栏文本的颜色，默认为navy
                    tabBarActiveTextColor={'#0000ff'}
                    // 不选中时默认标签栏文本的颜色，默认为black
                    tabBarInactiveTextColor={'black'}
                    // 标签栏文本的其他样式
                    tabBarTextStyle={{fontSize: 14, fontWeight: 'normal'}}
                    // 最初选择的选项卡的索引，默认为0 ===第一个选项卡
                    initialPage={this.state.page}
                    // TabBar组件
                    renderTabBar={() => <DefaultTabBar style={{height: 40}} />}
                    // 当选项卡更改时调用的函数。i：页面下标，ref：所选标签的引用
                    // onChangeTab={(obj)=>console.log(obj.i,obj.ref)}
                    onChangeTab={this._tabChoose.bind(this)}
                    // 页面滑动时调用的函数。num：选项卡所处的位置
                    onScroll={(num)=>console.log(num)}
                >
                    <FlatList
                        tabLabel='未付款'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('OrderDetail')}>
                                    <View style={{marginBottom: 10}}>
                                        <View style={{height: 38, paddingLeft: 10, paddingRight: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                                <Image 
                                                    style={{width: 16, height: 18, marginRight: 5}}
                                                    source={require('../images/timeIco.png')}
                                                />
                                                <Text style={{fontSize: 13}}>订单编号：684886784834864834</Text>
                                            </View>
                                            <Text style={{fontSize: 13}}>未付款</Text>
                                        </View>
                                        {
                                            item.lists.map((todo)=>
                                                <View style={styles.itemChild} key={todo.id}>
                                                    <View style={styles.itemChildCenter}>
                                                        <Image 
                                                            style={styles.itemChildCenterImg}
                                                            source={{uri: this.state.topImage}}
                                                        />
                                                    </View>
                                                    <View style={styles.itemChildBottom}>
                                                        <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
                                                        <View>
                                                            <View style={styles.itemChildBottomBox}>
                                                                <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2880}</Text>
                                                                <Text style={styles.itemChildBottomBoxText}>{'x' + 100}</Text>
                                                            </View>
                                                            <View>
                                                                <Text style={styles.itemChildBottomBoxText}>2018-03-30 15:33（模型时间）</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            )
                                        }
                                        <View style={[styles.itemChildNext, styles.itemChildtotal]}>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>共1件商品</Text>
                                            </View>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>小计：￥2800</Text>
                                            </View>
                                        </View>
                                        <View style={styles.itemChildNext}>
                                            <View style={styles.itemChildNextView}>
                                                <Text style={styles.itemChildNextViewText}>取消订单</Text>
                                            </View>
                                            <View style={styles.itemChildNextView}>
                                                <Text style={styles.itemChildNextViewText}>付款</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                    <FlatList
                        tabLabel='待发货'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('OrderDetail')}>
                                    <View style={{marginBottom: 10}}>
                                        <View style={{height: 38, paddingLeft: 10, paddingRight: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                                <Image 
                                                    style={{width: 16, height: 18, marginRight: 5}}
                                                    source={require('../images/timeIco.png')}
                                                />
                                                <Text style={{fontSize: 13}}>订单编号：684886784834864834</Text>
                                            </View>
                                            <Text style={{fontSize: 13}}>待发货</Text>
                                        </View>
                                        {
                                            item.lists.map((todo)=>
                                                <View style={styles.itemChild} key={todo.id}>
                                                    <View style={styles.itemChildCenter}>
                                                        <Image 
                                                            style={styles.itemChildCenterImg}
                                                            source={{uri: this.state.topImage}}
                                                        />
                                                    </View>
                                                    <View style={styles.itemChildBottom}>
                                                        <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
                                                        <View>
                                                            <View style={styles.itemChildBottomBox}>
                                                                <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2880}</Text>
                                                                <Text style={styles.itemChildBottomBoxText}>{'x' + 100}</Text>
                                                            </View>
                                                            <View>
                                                                <Text style={styles.itemChildBottomBoxText}>2018-03-30 15:33（模型时间）</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            )
                                        }
                                        <View style={[styles.itemChildNext, styles.itemChildtotal]}>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>共1件商品</Text>
                                            </View>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>小计：￥2800</Text>
                                            </View>
                                        </View>
                                        <View style={styles.itemChildNext}>
                                            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginRight: 10, minWidth: 65, borderWidth: 1, borderColor: '#1154c6', borderRadius: 20}}>
                                                <Text style={styles.itemChildNextViewText}>提醒卖家</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                    <FlatList
                        tabLabel='待收货'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('OrderDetail')}>
                                    <View style={{marginBottom: 10}}>
                                        <View style={{height: 38, paddingLeft: 10, paddingRight: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                                <Image 
                                                    style={{width: 16, height: 18, marginRight: 5}}
                                                    source={require('../images/timeIco.png')}
                                                />
                                                <Text style={{fontSize: 13}}>订单编号：684886784834864834</Text>
                                            </View>
                                            <Text style={{fontSize: 13}}>待收货</Text>
                                        </View>
                                        {
                                            item.lists.map((todo)=>
                                                <View style={styles.itemChild} key={todo.id}>
                                                    <View style={styles.itemChildCenter}>
                                                        <Image 
                                                            style={styles.itemChildCenterImg}
                                                            source={{uri: this.state.topImage}}
                                                        />
                                                    </View>
                                                    <View style={styles.itemChildBottom}>
                                                        <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
                                                        <View>
                                                            <View style={styles.itemChildBottomBox}>
                                                                <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2880}</Text>
                                                                <Text style={styles.itemChildBottomBoxText}>{'x' + 100}</Text>
                                                            </View>
                                                            <View>
                                                                <Text style={styles.itemChildBottomBoxText}>2018-03-30 15:33（模型时间）</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            )
                                        }
                                        <View style={[styles.itemChildNext, styles.itemChildtotal]}>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>共1件商品</Text>
                                            </View>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>小计：￥2800</Text>
                                            </View>
                                        </View>
                                        <View style={styles.itemChildNext}>
                                            <View style={styles.itemChildNextView}>
                                                <Text style={styles.itemChildNextViewText}>查看物流</Text>
                                            </View>
                                            <View style={styles.itemChildNextView}>
                                                <Text style={styles.itemChildNextViewText}>确认收货</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                    <FlatList
                        tabLabel='待评价'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('OrderDetail')}>
                                    <View style={{marginBottom: 10}}>
                                        <View style={{height: 38, paddingLeft: 10, paddingRight: 10, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                                <Image 
                                                    style={{width: 16, height: 18, marginRight: 5}}
                                                    source={require('../images/timeIco.png')}
                                                />
                                                <Text style={{fontSize: 13}}>订单编号：684886784834864834</Text>
                                            </View>
                                            <Text style={{fontSize: 13}}>待评价</Text>
                                        </View>
                                        {
                                            item.lists.map((todo)=>
                                                <View style={styles.itemChild} key={todo.id}>
                                                    <View style={styles.itemChildCenter}>
                                                        <Image 
                                                            style={styles.itemChildCenterImg}
                                                            source={{uri: this.state.topImage}}
                                                        />
                                                    </View>
                                                    <View style={styles.itemChildBottom}>
                                                        <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
                                                        <View>
                                                            <View style={styles.itemChildBottomBox}>
                                                                <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2880}</Text>
                                                                <Text style={styles.itemChildBottomBoxText}>{'x' + 100}</Text>
                                                            </View>
                                                            <View>
                                                                <Text style={styles.itemChildBottomBoxText}>2018-03-30 15:33（模型时间）</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            )
                                        }
                                        <View style={[styles.itemChildNext, styles.itemChildtotal]}>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>共1件商品</Text>
                                            </View>
                                            <View style={styles.itemChildtotalView}>
                                                <Text style={styles.itemChildtotalViewText}>小计：￥2800</Text>
                                            </View>
                                        </View>
                                        <View style={styles.itemChildNext}>
                                            <View style={styles.itemChildNextView}>
                                                <Text style={styles.itemChildNextViewText}>去评价</Text>
                                            </View>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                </ScrollableTabView>
                {
                    this.state.isModal?
                    <Gallery
                        style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, zIndex: 10000, backgroundColor: 'black' }}
                        images={[
                          { source: { uri: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg' } },
                          { source: { uri: 'http://pic26.nipic.com/20130105/10770379_104350027000_2.jpg' } },
                          { source: { uri: 'http://pic.58pic.com/58pic/11/28/27/758PICP58PIC4XD.jpg' } },
                          { source: { uri: 'http://a3.topitme.com/5/fb/0a/1127974529b510afb5o.jpg' } }
                        ]}
                        onPageSelected={(e)=>{console.log(e)}}
                        onSingleTapConfirmed={(e)=>{this.setState({isModal: false})}}
                        // onLongPress={(e)=>{alert(2)}}
                    />
                    :
                    null
                }
                <Loading 
                    visible={this.state.showModal} 
                    onRequestClose={this._onRequestClose.bind(this)}
                />           
            </View>
        )
    }
}

const styles = StyleSheet.create({
    itemChild: {height: 92, paddingLeft: 8, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderColor: '#eee', backgroundColor: '#ffffff', flexDirection: 'row'},
    itemChildTopText: {width: 11, height: 11, alignItems: 'center', backgroundColor: '#0048c2', borderRadius: 100},
    itemChildTopTextActiveColor: {backgroundColor: '#0048c2'},
    itemChildTopTextColor: {backgroundColor: '#b6b6b6'},
    itemChildCenter: {width: 85, height: 75,marginRight: 10},
    itemChildCenterImg: {width: 85, height: 75},
    itemChildBottom: {flex: 1, paddingRight: 12, justifyContent: 'space-between'},
    itemChildBottomText: {fontSize: 13, color: '#3a3a3a'},
    itemChildBottomBox: {flexDirection: 'row', justifyContent: 'space-between'},
    itemChildBottomBoxText: {fontSize: 11, color: '#828282'},
    itemChildBottomBoxPrice: {fontSize: 12, color: '#fd0408'},
    itemChildNext: {height: 38, paddingTop: 6, paddingBottom: 6, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'flex-end'},
    itemChildNextView: {minWidth: 65, borderWidth: 1, borderColor: '#1154c6', borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginRight: 10},
    itemChildNextViewText: {fontSize: 12, color: '#464646'},
    itemChildtotal: {alignItems: 'center'},
    itemChildtotalView: {marginRight: 10},
    itemChildtotalViewText: {fontSize: 13, color: '#737373'},
})